<!DOCTYPE html>
<!--压制HTML中文件的警告或者错误（只有当前文件中设置生效）-->
<!-- suppress ThymeleafVariablesResolveInspection -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="pagination">
<!-- 选择SIZE -->
<div class="form-group">
    <div class="col-xs-12">
        <form class="form-inline" id="pageSizeForm" role="form" method="get" action="">
            <div class="form-group">
                <select title="显示行数" id="pageSize" name="pageSize" class="form-control field" onchange="changePageSize($('#pageSize').val());">
                    <option value="10">显示10行</option>
                    <option value="25">显示25行</option>
                    <option value="50">显示50行</option>
                    <option value="100">显示100行</option>
                    <option value="250">显示250行</option>
                    <option value="500">显示500行</option>
                </select>
            </div>
        </form>
    </div>
    <hr>
</div>
<!-- 选择PAGENO -->
<nav>
    <ul class="pagination pagination-circle">
    </ul>
</nav>
<script>
    /* JS渲染页码 */
    function RenderPagination(pagination){
        $('.pagination').html('');
        if(pagination.hasPreviousPage){
            $('.pagination').append('<li><a href="javascript:;" onclick="SelectPage(1)">首页</a></li>');
            $('.pagination').append('<li><a href="javascript:;" onclick="SelectPage('+(pagination.pageNo-1)+')">&laquo;</a></li>');
        }else{
            $('.pagination').append('<li class="disabled"><a>首页</a></li>');
        }
        for(var i=pagination.start;i<=pagination.end;i++){
            if(pagination.pageNo===i){
                $('.pagination').append('<li class="active"><span>'+i+'</span></li>');
            }else{
                $('.pagination').append('<li><a href="javascript:;" onclick="SelectPage('+i+')">'+i+'</a></li>');
            }
        }
        if(pagination.hasNextPage){
            $('.pagination').append('<li><a href="javascript:;" onclick="SelectPage('+(pagination.pageNo+1)+')">&raquo;</a></li>');
            $('.pagination').append('<li><a href="javascript:;" onclick="SelectPage('+pagination.totalPages+')">尾页</a></li>');
        }else{
            $('.pagination').append('<li class="disabled"><a>尾页</a></li>');
        }
        $('.pagination').append('<li class="disabled"><span>总页数:'+pagination.totalPages+'</span></li>');
        $('.pagination').append('<li class="disabled"><span>总数据量:'+pagination.recordCount+'</span></li>');
        //选中单页数据
        $('#pageSize').val(pagination.pageSize);
    }
</script>
</div>
</body>
</html>
